<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta >
  <title>Title</title>
  <script src="../../static/js/jquery-1.11.0.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      /*display: flex;*/
      /*justify-content: center;*/
      /*align-items: center;*/
      background-color: rgba(231,233,233,0.9);
    }

    div {
      /*border: 1px solid red;*/

    }

    #div1 {
      width: 100%;
      height: 6vh;
      background-color: black;
      /*border-bottom: 1px solid black;*/
      /*color: white;*/
      background-color: rgba(205,205,205,0.9);
    }
    #sp3{
      line-height: 6vh;
      font-size: 3vh;
      margin-left: 50px;
    }
    #sp2{
      /*border: 1px solid red;*/
      line-height: 6vh;
      position: absolute;
      right: 10vh ;
    }
    #div2 {
      width: 100%;

      display: flex;
      justify-content: center;
      align-items: center;
      /*background: rgba(255, 255, 255, 0.6);*/
      /*border: 1px solid red;*/

    }

    #div2 div {
      /*border: 1px solid red;*/
    }

    #div3 {
      width: 15%;
      /*text-align: center;*/
      /*border-right: 1px solid black;*/
      height: 92vh;
      margin-left: 1vh;
      /*margin-top: 1vh;*/
      /*margin-bottom: 2vh;*/
      overflow-y:auto;
      background-color: white;
      background-color: rgba(205,205,205,0.9);
    }

    #div4 {

      background-color: rgba(205,205,205,0.9);
      width: 84%;
      margin: 1vh;
      height: 92vh;
      overflow:auto;

    }

    #div5 {
      /*width: 95%;*/
      /*height: 95%;*/
      background-color: white;

    }
    ol {
      /*text-align: center;*/
      margin-left: 70px;
      width: 100%;
      /*margin: 0 auto;*/
      list-style: none;
    }

    li {
      /*margin-top: 20px;*/
      /*background: gray;*/
      height: 40px;
      /*border-radius: 5px;*/
      line-height: 50px;
    }
  </style>
  <script>
    $(function (){
      //加载登录着信息
      $.ajax({
        url:"/userServlet",
        type:"post",
        dataType:"json",
        data:{action:"finduser"},
        success:function (d){
          //console.log(d);
          if(d.code==1){
            $("#sp1").text(d.data.u_name);
            $("#userid").text(d.data.u_id);
          }else{
            location.href="/pages/user/index.html";
          }
        }
      })
      //加载右侧导航栏部分
      $.ajax({
        url: "/Navig",
        type: "post",
        data: {action:"findAll"},
        dataType: "json",
        success:function (d){
          //console.log(d);
          if(d.code==1){
            $("#ol").html("");
            for(var i=0;i<d.data.length;i++){
              $("#ol").append("<li onclick='shownavig(\""+d.data[i].url+"\")'>"+d.data[i].name+"</li>")
            }
          }else {
            alert("查询导航栏失败")
          }
        },
        error:function (){
          alert("服务器异常");
        }
      })
      $("#li1").click(function (){
        $("#div4").load("/pages/user/navig.html")
      })
      $("#li2").click(function (){
        $("#div4").load("/pages/user/a.html")
      })
    })
    //加载主体页面
    function shownavig( url){
      $("#div4").load(url);
    }

  </script>



</head>
<body>
<!--头部导航栏-->
<div id="div1">
  <span id="sp3">银行管理系统</span>
  <span id="userid" style="display: none"></span>
  <span id="sp2">欢迎【<span id="sp1"></span>】</span>
</div>
<div id="div2">
  <!--左侧导航栏-->
  <div id="div3">
    <ol id="ol">

     </ol>

  </div>
  <!--右侧主体部分-->
  <div id="div4">

  </div>
</div>

</body>
</html>